diff options
| author | Adam Soltys <[email protected]> | 2023-01-07 23:15:04 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-01-07 23:15:04 -0800 |
| commit | 17d2c4b23f6ec1857a486872e1d156a62fdb3cca (patch) | |
| tree | f816bf66ac7575fddb7b794d3cfdf902d57daefd /src/routes/(app)/[username] | |
| parent | 88f25bb416e202d9480de56189d1b09f4804f749 (diff) | |
| download | coinos-ui-17d2c4b23f6ec1857a486872e1d156a62fdb3cca.tar.gz coinos-ui-17d2c4b23f6ec1857a486872e1d156a62fdb3cca.zip | |
tx page
Diffstat (limited to 'src/routes/(app)/[username]')
| -rw-r--r-- | src/routes/(app)/[username]/transactions/[...page]/+page.svelte | 117 |
1 files changed, 62 insertions, 55 deletions
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte index 2ea151d5..89207134 100644 --- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte +++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte @@ -13,6 +13,11 @@ let { start, end, user } = data; let change = ({ target: { value } }) => goto(value); + let link = (tx) => { + if (tx.redeemcode) return `/voucher/${tx.redeemcode}`; + if (tx.with) return '/' + tx.with.username; + return `/tx/${tx.hash}`; + }; let presets = [ { title: $t('transactions.day'), start: sub(new Date(), { days: 1 }), end: null }, @@ -101,75 +106,77 @@ <div class="text-base"> {#each $txns as tx} - <div class="grid grid-cols-3 border-b h-24"> - <div class="whitespace-nowrap my-auto"> - <div class="font-bold"> - {f(tx.amount * (tx.rate / sats), tx.currency)} + <a href={link(tx)}> + <div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4"> + <div class="whitespace-nowrap my-auto"> + <div class="font-bold"> + {f(tx.amount * (tx.rate / sats), tx.currency)} - {#if tx.tip} - <span class="text-sm"> - +{f(tx.tip * (tx.rate / sats), tx.currency)} - </span> - {/if} - </div> + {#if tx.tip} + <span class="text-sm"> + +{f(tx.tip * (tx.rate / sats), tx.currency)} + </span> + {/if} + </div> - <div class="text-secondary"> - {sat(tx.amount)} + <div class="text-secondary"> + {sat(tx.amount)} - {#if tx.tip} - <span class="text-sm"> - +{sat(tx.tip)} - </span> - {/if} + {#if tx.tip} + <span class="text-sm"> + +{sat(tx.tip)} + </span> + {/if} + </div> </div> - </div> - <div class="flex my-auto"> - {#if tx.redeemcode} - <a href={`/voucher/${tx.redeemcode}`}> - <div class="text-secondary flex"> - <div class="my-auto mr-1"> - <img src="/icons/logo-symbol.svg" class="w-12 border-4 border-white" /> + <div class="flex my-auto"> + {#if tx.redeemcode} + <a href={`/voucher/${tx.redeemcode}`}> + <div class="text-secondary flex"> + <div class="my-auto mr-1"> + <img src="/icons/logo-symbol.svg" class="w-12 border-4 border-transparent" /> + </div> + + <div class="my-auto">Voucher</div> + </div> + </a> + {:else if tx.with} + <a href={`/${tx.with.username}`}> + <div class="flex"> + <div class="my-auto"> + <Avatar user={tx.with} size={12} /> + </div> + <div class="my-auto ml-1 text-secondary">{tx.with.username}</div> </div> + </a> + {:else} + <div class="text-secondary flex"> + {#if tx.network === 'lightning'} + <div class="text-3xl">⚡️</div> + {:else} + <div class="my-auto mr-1"> + <img src="/images/bitcoin.svg" class="w-12 border-4 border-transparent" /> + </div> + {/if} - <div class="my-auto">Voucher</div> - </div> - </a> - {:else if tx.with} - <a href={`/${tx.with.username}`}> - <div class="flex"> <div class="my-auto"> - <Avatar user={tx.with} size={12} /> + {tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'} </div> - <div class="my-auto ml-1 text-secondary">{tx.with.username}</div> </div> - </a> - {:else} - <div class="text-secondary flex"> - {#if tx.network === 'lightning'} - <div class="text-3xl">⚡️</div> - {:else} - <div class="my-auto mr-1"> - <img src="/images/bitcoin.svg" class="w-12 border-4 border-white" /> - </div> - {/if} + {/if} + </div> - <div class="my-auto"> - {tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'} - </div> + <div class="text-secondary text-right text-sm my-auto"> + <div> + {format(parseISO(tx.createdAt), 'h:mm aaa')} + </div> + <div> + {format(parseISO(tx.createdAt), 'MMM d')} </div> - {/if} - </div> - - <div class="text-secondary text-right text-sm my-auto"> - <div> - {format(parseISO(tx.createdAt), 'h:mm aaa')} - </div> - <div> - {format(parseISO(tx.createdAt), 'MMM d')} </div> </div> - </div> + </a> {:else} <p class="text-secondary text-lg text-center">{$t('transactions.empty')}</p> {/each} |